{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}尚硅谷书店-我的订单{% endblock title %}
{% block topfiles %}
{% endblock topfiles %}
{% block body %}
	
	<h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			<dd><input type="radio" name="addr_id" value="{{ addr.id }}" checked="">{{ addr.recipient_addr }} （{{ addr.recipient_name }} 收） {{ addr.recipient_phone }}</dd>
		</dl>
		<a href="user_center_site.html" class="edit_site">编辑收货地址</a>

	</div>
	
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio" name="pay_style" value="1" checked>
			<label class="cash">货到付款</label>
			<input type="radio" name="pay_style" value="2">
			<label class="weixin">微信支付</label>
			<input type="radio" name="pay_style" value="3">
			<label class="zhifubao"></label>
			<input type="radio" name="pay_style" value="4">
			<label class="bank">银行卡支付</label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>
	
	<div class="common_list_con clearfix">
		<ul class="book_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>		
		</ul>
        {% for book in books_li %}
		<ul class="book_list_td clearfix">
			<li class="col01">{{ forloop.counter }}</li>
			<li class="col02"><img src="{% static book.image %}"></li>
			<li class="col03">{{ book.name }}</li>
			<li class="col04">{{ book.unite }}</li>
			<li class="col05">{{ book.price }}元</li>
			<li class="col06">{{ book.count }}</li>
			<li class="col07">{{ book.amount }}元</li>
		</ul>
        {% endfor %}
	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_book_count">共<em>{{ total_count }}</em>件商品，总金额<b>{{ total_price }}元</b></div>
			<div class="transit">运费：<b>{{ transit_price }}元</b></div>
			<div class="total_pay">实付款：<b>{{ total_pay }}元</b></div>
		</div>
	</div>

	<div class="order_submit clearfix">
        {% csrf_token %}
		<a href="javascript:;" books_ids="{{ books_ids }}" id="order_btn">提交订单</a>
	</div>
{% endblock body %}
{% block bottom %}
	<div class="popup_con">
		<div class="popup">
			<p>订单提交成功！</p>
		</div>
		
		<div class="mask"></div>
	</div>
{% endblock bottom %}
{% block bottomfiles %}
	<script type="text/javascript">
		$('#order_btn').click(function() {
            // 获取收货地址的id, 支付方式，用户购买的商品id
            addr_id = $('input[name="addr_id"]').val()
            pay_method = $('input[name="pay_style"]:checked').val()
            books_ids = $(this).attr('books_ids')
            csrf = $('input[name="csrfmiddlewaretoken"]').val()
            // alert(addr_id+':'+pay_method+':'+books_ids)
            // 发起post请求， 访问/order/commit/
            params = {
            	'addr_id': addr_id,
            	'pay_method': pay_method,
                'books_ids': books_ids,
                'csrfmiddlewaretoken': csrf
            }
            $.post('/order/commit/', params, function (data) {
                // 根据json进行处理
                if (data.res == 6){
                    localStorage.setItem('order_finish',2);
                    $('.popup_con').fadeIn('fast', function() {
                        setTimeout(function(){
                            $('.popup_con').fadeOut('fast',function(){
                                window.location.href = '/user/order/';
                            });
                        },3000)

                    });
                }
                else {
                    alert(data.errmsg)
                }
            })

		});
	</script>
{% endblock bottomfiles %}